<template>
  <div class="counter">
    <h2>计数器 1</h2>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Counter1',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement'])
  }
}
</script>

<style scoped>
.counter {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
}
</style> 